<template>
	<view class="categoryBanner">
		<!-- <cardTitleVue>
			<template #title>
				我的收藏
			</template>
		</cardTitleVue>
		<view class="cate-my-list">
			<scroll-view scroll-x>
				<cateItemVue v-for="item in 10" class="scroll-item"></cateItemVue>
			</scroll-view>

		</view> -->
		<cardTitleVue>
			<template #title>
				全部分类
			</template>
		</cardTitleVue>
		<view class="cate-list">
			<cateItemVue v-for="item in list" :item="item" class="cate-list-item"
				></cateItemVue>
		</view>
	</view>
</template>

<script setup>
	import cateItemVue from '@/components/cate-item/cate-item.vue';
	import cardTitleVue from '@/components/card-title/card-title.vue';
	import {
		apiGetCategory
	} from '@/api/apis';
	import {
		ref
	} from 'vue';
	const list = ref([])
	const getCategory = async () => {
		await apiGetCategory().then(res => {
			list.value = res.data
		})
	}
	
	getCategory()
</script>

<style scoped lang="scss">
	.categoryBanner {
		padding: 20rpx;

		.cate-list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 30rpx;

		}

		.cate-my-list {
			overflow: hidden;
			white-space: nowrap;

			.scroll-item {
				padding: 20rpx;
				display: inline-block;
				margin-right: 20rpx;
				background-color: #f9fafb;
				border-radius: 10rpx;
			}
		}
	}
</style>